<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/index.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="myself">
        <img
          src="img/airplane.png"
          width="336"
          height="420"
          alt=""
          id="my-one"
          class="my-airplane"
        />
        <img
          src="img/airplane.png"
          width="336"
          height="420"
          alt=""
          id="my-two"
          class="my-airplane"
        />
        <img
          src="img/airplane.png"
          width="336"
          height="420"
          alt=""
          id="my-three"
          class="my-airplane"
        />
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="controller">
        <p class="description"></p>
        <div class="connect">
          <input placeholder="请输入轰炸位置 例如2,3" class="attack" />
          <a class="attackEnsure">确定</a>
        </div>
        <div class="AI" style="
    display: flex;
    align-items: center;
    justify-content: space-around;
">
          <label for="aiToggle" style="margin:auto">
            <input type="checkbox" name="ai" id="aiToggle" style="margin-right: 5px;" data-ai-toggle>
            <span>AI代打</span>
          </label>
        </div>
        <div class="failure"><a>就地投降</a></div>
      </div>
      <div class="enemy">
        <img src="" alt="" id="your-one" class="your-airplane" />
        <img src="" alt="" id="your-two" class="your-airplane" />
        <img src="" alt="" id="your-three" class="your-airplane" />
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="chooseGoal">
      <div class="chooseGoalContent">
        <div class="content">
          <a class="createRoom">创建房间</a>
          <a class="joinRoom">加入房间</a>
        </div>
        <input class="IPInput" placeholder="请输入IP地址" />
        <p class="tip"></p>
        <div class="buttonFunction">
          <a class="backLast">返回上一级</a>
          <a class="ensure">确定</a>
        </div>
      </div>
    </div>
    <div class="placePlane">
      <div class="planeContainer">
        <p class="planeTip">
          请输入飞机头坐标以及飞机头朝向 以左上角为原点 例如2,3,1
          2代表飞机头横坐标 3代表飞机头纵坐标 1代表飞机头朝上 2 代表飞机头朝右
          3代表飞机头朝下 4代表飞机头朝左
        </p>
        <input class="myPlane" placeholder="飞机一" value="2,2,1"/>
        <input class="myPlane" placeholder="飞机二" value="6,3,3"/>
        <input class="myPlane" placeholder="飞机三" value="8,7,2"/>
        <a class="submitPlane">确定提交</a>
      </div>
    </div>
  </body>
  <script src="./app/main.js" type="module"></script>
  <script type="text/javascript" src="./app/server.js"></script>
</html>
